<!--
 @description 经销商门店信息
 @fileName Shop.vue
 @author zengqiongying
 @created 2023/04/28 13:54:59
-->
<template>
  <div class="has-foot-pb">
    <Card no-mg :round="false">
      <CreateItem v-model="formData" />
    </Card>
    <Card no-mg :round="false" title="附件上传">
      <Cell title="营业执照图片" is-column custom required :right="false">
        <div class="attr-upload">
          <AttachmentUpload
            v-model="licenseList"
            view-type="image"
            type-code="ACCESS060"
            :limit="1"
            :objectId="shopDetail.id"
            :imageHeight="124"
            :imageColumn="1"
          >
            <template #trigger>
              <div class="image">
                <img src="@/assets/images/license.png" />
              </div>
            </template>
          </AttachmentUpload>
          <div class="name">{{ licenseList.length === 0 ? '上传' : '' }}营业执照</div>
        </div>
      </Cell>
      <Cell title="专卖店特许经营合同图片" is-column custom required :right="false">
        <!-- <div class="attr-upload">
          <AttachmentUpload
            v-model="agreementList"
            view-type="image"
            type-code="ACCESS061"
            :limit="1"
            :objectId="shopDetail.id"
            :imageHeight="124"
            :imageColumn="1"
          >
            <template #trigger>
              <div class="image">
                <img src="@/assets/images/operating_agreement.png" />
              </div>
            </template>
          </AttachmentUpload>
          <div class="name">{{ agreementList.length === 0 ? '上传' : '' }}特许经营合同照片</div>
        </div> -->
        <AttachmentUpload v-model="agreementList" type-code="ACCESS061" :objectId="shopDetail.id" />
      </Cell>
    </Card>
    <div :class="['ctm-content-foot', { relative: keyboard.show }]">
      <div class="btn radius-larg ctm-btn-main" @click="onSave()">保存</div>
    </div>
  </div>
</template>

<script lang="ts">
  import { toRefs, getCurrentInstance, nextTick } from 'vue'
  import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router'
  import { useStore } from 'vuex'
  import Card from '@/components/Card/index.vue'
  import Cell from '@/components/Cell/index.vue'
  import CreateItem from '../components/Shop/CreateItem.vue'
  import AttachmentUpload from '@/components/AttachmentUpload/index.vue'
  import { detail } from '@/apis/dealerMarketing/NewShop'
  import { createShopMixin, getAttachmentList } from '../mixins/Shop'
  import { initFormData } from '@/utils'
  import GetKeyboardMixin from '@/utils/useKeyboard'
  export default {
    name: 'DealerNewShopBasicInfo',
    components: { Card, Cell, CreateItem, AttachmentUpload },
    setup() {
      const instance = getCurrentInstance()
      const { proxy }: any = instance
      const $store = useStore()
      const $router = useRouter()
      const $route = useRoute()

      const { datas, onSave, shopDetail } = createShopMixin(() => {
        proxy.$SimpleEvents.emit('refreshCustomerNewShopEditInfo', datas.id)
        nextTick(() => {
          $router.goBack()
        })
      })
      datas.id = $route.query?.id || ''

      datas.keyboard = {
        show: false
      }
      datas.keyboard = GetKeyboardMixin()

      const getDetail = () => {
        const id = `${datas.id}`
        detail(id).then(async (res: any) => {
          datas.detail = res.data || {}
          const d = res.data?.shopDTO || {}
          initFormData(d, datas.formData)
          if (d.id) {
            datas.otherFiles = await getAttachmentList(d.id, ['ACCESS060', 'ACCESS061'])
          }
        })
      }
      onBeforeRouteLeave((to, from) => {
        const instanceName = instance?.type?.name
        const toName: any = to.name
        if (['DealerNewShopEdit'].includes(toName)) {
          $store.commit('routerKeep/removeCache', instanceName)
        } else {
          $store.commit('routerKeep/resetCache', instanceName)
        }
      })

      getDetail()

      return {
        ...toRefs(datas),
        shopDetail,
        onSave
      }
    }
  }
</script>
<style lang="less" scoped>
  .attr-upload {
    width: 50%;
    .image {
      width: 100%;
      height: 124px;
      background-size: auto 100%;
      background-repeat: no-repeat;
      background-position: center;
      img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
      }
    }
    .name {
      margin-top: 8px;
      font: var(--font-main-body);
      color: var(--texticon-default-stronger);
      text-align: center;
    }
  }
</style>
